<template>
	<!-- #ifdef APP -->
	<scroll-view class="container" style="flex: 1">
	<!-- #endif -->
	<!-- #ifdef WEB -->
	<view class="web-container">
	<!-- #endif -->
		<!-- 用户信息卡片 -->
		<view class="card user-card">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="user-details">
					<text class="username">{{userInfo.name}}</text>
					<text class="user-subtitle">{{userInfo.subtitle}}</text>
					<view class="user-stats">
						<text class="stat-item">监测 {{userInfo.monitorDays}} 天</text>
						<text class="stat-divider">·</text>
						<text class="stat-item">健康评分 {{userInfo.healthScore}}</text>
					</view>
				</view>
				<text class="edit-icon" @click="editProfile">✏️</text>
			</view>
		</view>

		<!-- 健康概览 -->
		<view class="card health-overview">
			<view class="card-header">
				<text class="card-title">本周健康概览</text>
				<text class="view-more" @click="viewHealthReport">查看详情 ></text>
			</view>
			<view class="health-metrics">
				<view class="health-metric" v-for="metric in healthMetrics" :key="metric.id">
					<text class="metric-icon">{{metric.icon}}</text>
					<view class="metric-info">
						<text class="metric-name">{{metric.name}}</text>
						<text class="metric-value">{{metric.value}}</text>
					</view>
					<view class="metric-trend" :class="metric.trend">
						<text class="trend-icon">{{metric.trendIcon}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<text class="section-title">功能设置</text>
			<view class="menu-list">
				<view class="menu-item" v-for="item in menuItems" :key="item.id" @click="handleMenuClick(item.action)">
					<text class="menu-icon">{{item.icon}}</text>
					<text class="menu-text">{{item.title}}</text>
					<view class="menu-extra">
						<text class="menu-subtitle" v-if="item.subtitle">{{item.subtitle}}</text>
						<text class="menu-arrow">></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 设备管理 -->
		<view class="menu-section">
			<text class="section-title">设备管理</text>
			<view class="menu-list">
				<view class="menu-item" @click="manageDevices">
					<text class="menu-icon">📱</text>
					<text class="menu-text">我的设备</text>
					<view class="menu-extra">
						<text class="menu-subtitle">{{deviceInfo.count}} 台设备</text>
						<text class="menu-arrow">></text>
					</view>
				</view>
				<view class="menu-item" @click="deviceSettings">
					<text class="menu-icon">⚙️</text>
					<text class="menu-text">设备设置</text>
					<view class="menu-extra">
						<text class="menu-arrow">></text>
					</view>
				</view>
				<view class="menu-item" @click="syncData">
					<text class="menu-icon">🔄</text>
					<text class="menu-text">数据同步</text>
					<view class="menu-extra">
						<text class="menu-subtitle">最后同步: {{deviceInfo.lastSync}}</text>
						<text class="menu-arrow">></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 应用设置 -->
		<view class="menu-section">
			<text class="section-title">应用设置</text>
			<view class="menu-list">
				<view class="menu-item" @click="openSettings">
					<text class="menu-icon">⚙️</text>
					<text class="menu-text">通用设置</text>
					<view class="menu-extra">
						<text class="menu-arrow">></text>
					</view>
				</view>
				<view class="menu-item" @click="privacySettings">
					<text class="menu-icon">🔒</text>
					<text class="menu-text">隐私设置</text>
					<view class="menu-extra">
						<text class="menu-arrow">></text>
					</view>
				</view>
				<view class="menu-item" @click="aboutApp">
					<text class="menu-icon">ℹ️</text>
					<text class="menu-text">关于应用</text>
					<view class="menu-extra">
						<text class="menu-subtitle">v{{appInfo.version}}</text>
						<text class="menu-arrow">></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="logout-section">
			<view class="logout-button" @click="logout">
				<text class="logout-text">退出登录</text>
			</view>
		</view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
	<!-- #ifdef WEB -->
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfo: {
					name: "张三",
					subtitle: "健康管理专家",
					avatar: "/static/default_avatar.png",
					monitorDays: 128,
					healthScore: 85
				},
				
				// 健康指标
				healthMetrics: [
					{
						id: 1,
						icon: "💗",
						name: "平均心率",
						value: "72 BPM",
						trend: "stable",
						trendIcon: "→"
					},
					{
						id: 2,
						icon: "🩸",
						name: "平均血氧",
						value: "98%",
						trend: "up",
						trendIcon: "↗"
					},
					{
						id: 3,
						icon: "😴",
						name: "睡眠质量",
						value: "8.2/10",
						trend: "up",
						trendIcon: "↗"
					},
					{
						id: 4,
						icon: "🏃",
						name: "运动时长",
						value: "45min",
						trend: "down",
						trendIcon: "↘"
					}
				],
				
				// 菜单项
				menuItems: [
					{
						id: 1,
						icon: "📊",
						title: "健康报告",
						subtitle: "",
						action: "healthReport"
					},
					{
						id: 2,
						icon: "🎯",
						title: "健康目标",
						subtitle: "3个目标进行中",
						action: "healthGoals"
					},
					{
						id: 3,
						icon: "🚨",
						title: "提醒设置",
						subtitle: "",
						action: "notifications"
					},
					{
						id: 4,
						icon: "👥",
						title: "家庭共享",
						subtitle: "2位成员",
						action: "familySharing"
					},
					{
						id: 5,
						icon: "🏥",
						title: "医生联系",
						subtitle: "",
						action: "doctorContact"
					}
				],
				
				// 设备信息
				deviceInfo: {
					count: 2,
					lastSync: "2小时前"
				},
				
				// 应用信息
				appInfo: {
					version: "1.0.0"
				}
			}
		},
		
		onLoad() {
			this.loadUserData()
		},
		
		methods: {
			// 加载用户数据
			loadUserData() {
				// 这里可以调用API获取用户信息
				console.log("加载用户数据")
			},
			
			// 编辑个人资料
			editProfile() {
				uni.showToast({
					title: "编辑资料功能开发中",
					icon: "none"
				})
			},
			
			// 查看健康报告
			viewHealthReport() {
				uni.navigateTo({
					url: "/pages/report/report"
				})
			},
			
			// 处理菜单点击
			handleMenuClick(action) {
				switch (action) {
					case "healthReport":
						uni.navigateTo({
							url: "/pages/report/report"
						})
						break
					case "healthGoals":
						uni.showToast({
							title: "健康目标功能开发中",
							icon: "none"
						})
						break
					case "notifications":
						uni.showToast({
							title: "提醒设置功能开发中",
							icon: "none"
						})
						break
					case "familySharing":
						uni.showToast({
							title: "家庭共享功能开发中",
							icon: "none"
						})
						break
					case "doctorContact":
						uni.showToast({
							title: "医生联系功能开发中",
							icon: "none"
						})
						break
					default:
						break
				}
			},
			
			// 管理设备
			manageDevices() {
				uni.showToast({
					title: "设备管理功能开发中",
					icon: "none"
				})
			},
			
			// 设备设置
			deviceSettings() {
				uni.showToast({
					title: "设备设置功能开发中",
					icon: "none"
				})
			},
			
			// 同步数据
			syncData() {
				uni.showToast({
					title: "正在同步数据...",
					icon: "loading"
				})
				
				// 模拟同步过程
				setTimeout(() => {
					uni.hideToast()
					uni.showToast({
						title: "同步完成",
						icon: "success"
					})
					this.deviceInfo.lastSync = "刚刚"
				}, 2000)
			},
			
			// 通用设置
			openSettings() {
				uni.showToast({
					title: "通用设置功能开发中",
					icon: "none"
				})
			},
			
			// 隐私设置
			privacySettings() {
				uni.showToast({
					title: "隐私设置功能开发中",
					icon: "none"
				})
			},
			
			// 关于应用
			aboutApp() {
				uni.showModal({
					title: "关于ECG心电监测",
					content: `版本: ${this.appInfo.version}\n\n专业的心电健康监测应用，为您提供全天候的健康守护。`,
					showCancel: false
				})
			},
			
			// 退出登录
			logout() {
				uni.showModal({
					title: "退出登录",
					content: "确定要退出当前账号吗？",
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储的用户信息
							uni.removeStorageSync('userToken')
							uni.removeStorageSync('userInfo')
							
							uni.showToast({
								title: "已退出登录",
								icon: "success"
							})
							
							// 跳转到登录页或重启应用
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/index/index"
								})
							}, 1500)
						}
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		padding: 12px;
	}

	/* #ifdef WEB */
	.web-container {
		background-color: #f5f5f5;
		padding: 20px;
		min-height: 100vh;
		max-width: 1200px;
		margin: 0 auto;
		overflow-y: auto;
	}
	/* #endif */

	.card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* 用户信息卡片 */
	.user-card {
		margin-bottom: 16px;
	}

	.user-info {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 30px;
		background-color: #f0f0f0;
		margin-right: 12px;
	}

	.user-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 4px;
	}

	.user-subtitle {
		font-size: 14px;
		color: #666666;
		margin-bottom: 4px;
	}

	.user-stats {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.stat-item {
		font-size: 12px;
		color: #007AFF;
	}

	.stat-divider {
		font-size: 12px;
		color: #cccccc;
		margin: 0 8px;
	}

	.edit-icon {
		font-size: 16px;
		color: #666666;
		padding: 8px;
	}

	/* 健康概览 */
	.health-overview {
		margin-bottom: 16px;
	}

	.card-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.view-more {
		font-size: 14px;
		color: #007AFF;
	}

	.health-metrics {
		display: flex;
		flex-direction: column;
	}

	.health-metric {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 12px;
	}

	.health-metric:last-child {
		margin-bottom: 0;
	}

	.metric-icon {
		font-size: 20px;
		width: 24px;
		text-align: center;
		margin-right: 12px;
	}

	.metric-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.metric-name {
		font-size: 14px;
		color: #666666;
		margin-bottom: 2px;
	}

	.metric-value {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.metric-trend {
		width: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.metric-trend.up .trend-icon {
		color: #00d4aa;
	}

	.metric-trend.down .trend-icon {
		color: #ff6b35;
	}

	.metric-trend.stable .trend-icon {
		color: #666666;
	}

	/* 菜单部分 */
	.menu-section {
		margin-bottom: 16px;
	}

	.section-title {
		font-size: 14px;
		font-weight: 500;
		color: #666666;
		margin-bottom: 8px;
		margin-left: 4px;
	}

	.menu-list {
		background-color: #ffffff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.menu-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		font-size: 18px;
		width: 24px;
		margin-right: 12px;
	}

	.menu-text {
		font-size: 16px;
		color: #333333;
		flex: 1;
	}

	.menu-extra {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.menu-subtitle {
		font-size: 14px;
		color: #666666;
		margin-right: 8px;
	}

	.menu-arrow {
		font-size: 14px;
		color: #cccccc;
	}

	/* 退出登录 */
	.logout-section {
		margin-top: 24px;
		margin-bottom: 24px;
	}

	.logout-button {
		background-color: #ffffff;
		border-radius: 12px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.logout-text {
		font-size: 16px;
		color: #ff4444;
		font-weight: 500;
	}

	/* Web平台适配 */
	/* #ifdef WEB */
	.menu-item {
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.menu-item:hover {
		background-color: #f8f9fa;
	}

	.edit-icon {
		cursor: pointer;
		transition: color 0.2s ease;
	}

	.edit-icon:hover {
		color: #007AFF;
	}

	.logout-button {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.logout-button:hover {
		background-color: #fff5f5;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.view-more {
		cursor: pointer;
		transition: color 0.2s ease;
	}

	.view-more:hover {
		color: #0056b3;
	}
	/* #endif */

	/* Android状态栏适配 */
	/* #ifdef APP-ANDROID */
	.container {
		padding-top: 25px;
	}
	/* #endif */
</style> 